<template >
	<div v-loading="loading">
	   	<div id='line'></div>
    </div>
</template>
<script>
import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
import { listAllShow} from "@/api/allShow";//查询统计考勤记录
export default {
    name:'Index',
    data() {
        return {
            // 遮罩层
            loading: true,
            // 日期字典，每个日期对应的数据下标
            dateDict:{},
            //部门列表
            deptList:[],
            //部门数据字典
            deptDict:{},
            //行政班级列表
            classList:[],
            //数据颜色列表
            corlorList:[],
            //数据列表
            dataList:[
            ],
            //时间数据列表，元素为时间(date)
            dateList:[],
            dateChecked:7
            }
    },
    mounted() {
        this.getList();
    },
    methods:{
        //权限判断
        checkPermi,
        checkRole,
        //获取以当前时间为基准的年月日
        getDay(day){
            var today = new Date();
            var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
            today.setTime(targetday_milliseconds); //注意，这行是关键代码
            var tYear = today.getFullYear();
            var tMonth = today.getMonth();
            var tDate = today.getDate();
            tMonth = this.doHandleMonth(tMonth + 1);
            tDate = this.doHandleMonth(tDate);
            return tYear+"-"+tMonth+"-"+tDate;
        },
        doHandleMonth(month){
            var m = month;
            if(month.toString().length == 1){
            m = "0" + month;
            }
            return m;
        },
        //对比日期下标
        checkedDate(obj1,obj2,index,key1){
            index = index+1;
            //如果超长，就返回0
            if(index>this.dateList.length){
                return 0;
            }
            //如果日期匹配上了，则返回相应结果
            else if(obj1.shows[index].date===obj2.shows[key1].date){
                return ((obj2.shows[key1].mount/obj1.shows[index].mount)*100).toFixed(2);
            }
            else{
                this.checkedDate(obj1,obj2,index,key1);
            }
        },
        //随机生成颜色
        randomColor(){
            var color="";
            for(var i=0;i<3;i++) color+=parseInt(200+Math.random()*56)+",";
            //去除最后一个逗号
            color=color.substring(0,color.length-1);
            return color;
        },
        /** 查询部门列表 */
        getList() {
            let that = this;
                let queryForm = {};
                queryForm.startTime = this.getDay(-this.dateChecked);
                queryForm.endTime = this.getDay(1);
                //获取往前七天的日期
                for(let i =-this.dateChecked;i<1;i++){
                    this.dateList.push(this.getDay(i));
                }
                //初始化颜色列表
                this.corlorList = [];
                for(let i = 0;i<this.dateList.length;i++){
                    this.dateDict[this.dateList[i]] = i;
                    this.corlorList.push(this.randomColor());
                }
                listAllShow(queryForm).then(response=>{
                    console.log(response);
                    let obj = {};
                    obj.name = '全校出勤率统计'
                    obj.data = [];
                    //给数组日期字典的长度并赋值为0
                    for(let i = 0;i<this.dateList.length;i++){
                        obj.data.push(0);
                    }
                    for (const key in response) {
                      obj.data[this.dateDict[response[key].date]] = (response[key].mount*100).toFixed(2);
                    }
                    this.dataList.push(obj);
                    return '获取考勤数据成功'
                }).then(response =>{
                console.log(response);
                this.loading = false;
                // let interval = setInterval(()=>{
                //     if(document.getElementById("line")){
                //         clearInterval(interval);
                //     }
                //     console.log(123)
                // },100)
                console.log('id:',document.getElementById("line"));
                const myChart = this.$echarts.init(document.getElementById("line"));
                //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
                myChart.setOption((()=>{
                    let optionObj = {
                    backgroundColor: '#394056',
                    toolbox: {
                      itemSize:32,
                      iconStyle:{
                          color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'red' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'blue' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                      },
                      feature: {
                          myTool1: {
                              show: true,
                              title: '近7天数据',
                              icon: 'image://'+'data:image/svg+xml;utf8,'+encodeURIComponent('<svg t="1618815636477" class="icon" viewBox="0 0 2380 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15853" width="32" height="32"><path d="M512 0h1356.8a512 512 0 0 1 512 512 512 512 0 0 1-512 512H512A512 512 0 0 1 0 512 512 512 0 0 1 512 0z" fill="#3A75FF" opacity=".2" p-id="15854"></path><path d="M512 102.4h1356.8a409.6 409.6 0 0 1 409.6 409.6 409.6 409.6 0 0 1-409.6 409.6H512A409.6 409.6 0 0 1 102.4 512 409.6 409.6 0 0 1 512 102.4z" fill="#29c9e4" opacity=".9" p-id="15855" data-spm-anchor-id="a313x.7781069.0.i8" class="selected"></path></svg>'),
                              onclick: function (){
                                  that.dateChecked = 7;
                                  that.dataList = [];
                                  that.deptList = [];
                                  that.classList = [];
                                  that.dateList = [];
                                  that.getList();
                              }
                          },
                          myTool2: {
                              show: true,
                              title: '近15天数据',
                              icon: 'image://'+'data:image/svg+xml;utf8,'+encodeURIComponent('<svg t="1618937462604" class="icon" viewBox="0 0 2380 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16855" width="32" height="32"><path d="M512 0h1356.8a512 512 0 0 1 512 512 512 512 0 0 1-512 512H512A512 512 0 0 1 0 512 512 512 0 0 1 512 0z" fill="#29c9e4" opacity=".2" p-id="16856"></path><path d="M512 102.4h1356.8a409.6 409.6 0 0 1 409.6 409.6 409.6 409.6 0 0 1-409.6 409.6H512A409.6 409.6 0 0 1 102.4 512 409.6 409.6 0 0 1 512 102.4z" fill="#67f70c" opacity=".9" p-id="16857"></path></svg>'),
                              onclick: function (){
                                  that.dateChecked = 15;
                                  that.dataList = [];
                                  that.deptList = [];
                                  that.classList = [];
                                  that.dateList = [];
                                  that.getList();
                              }
                          },
                          myTool3: {
                              show: true,
                              title: '近30天数据',
                              icon: 'image://'+'data:image/svg+xml;utf8,'+encodeURIComponent('<svg t="1618937462604" class="icon" viewBox="0 0 2380 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16855" width="32" height="32"><path d="M512 0h1356.8a512 512 0 0 1 512 512 512 512 0 0 1-512 512H512A512 512 0 0 1 0 512 512 512 0 0 1 512 0z" fill="#ecef13" opacity=".2" p-id="16856"></path><path d="M512 102.4h1356.8a409.6 409.6 0 0 1 409.6 409.6 409.6 409.6 0 0 1-409.6 409.6H512A409.6 409.6 0 0 1 102.4 512 409.6 409.6 0 0 1 512 102.4z" fill="#ecef13" opacity=".9" p-id="16857"></path></svg>'),
                              onclick: function (){
                                  that.dateChecked = 30;
                                  that.dataList = [];
                                  that.deptList = [];
                                  that.classList = [];
                                  that.dateList = [];
                                  that.getList();
                              }
                          }
                      },
                      x: 'center',
                      top:30
                    },
                    title: {
                    top: 10,
                    
                    text: '全校出勤率统计',
                    x: 'center',
                    textStyle: {
                        fontWeight: 'normal',
                        fontSize: 16,
                        color: '#F1F1F3'
                    },
                    },
                    tooltip: {
                    trigger: 'axis',
                    formatter:function(params)
                    {
                        var relVal = params[0].name;
                        for (var i = 0, l = params.length; i < l; i++) {
                            relVal += '<br/>'+ params[i].marker + params[i].seriesName + ' : ' + params[i].value+"%";
                        }
                        return relVal;
                    },
                    axisPointer: {
                        type:'line',
                        lineStyle: {
                        color: '#57617B'
                        }            
                    }
                    },
                    grid: {
                    top: 100,
                    left: '2%',
                    right: '2%',
                    bottom: '4%',
                    containLabel: true
                    },
                    xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {
                        lineStyle: {
                        color: '#57617B'
                        }
                    },
                    data: this.dateList
                    }],
                    yAxis: [{
                    type: 'value',
                    name: '出勤率',
                    nameTextStyle:{
                        fontStyle : 'normal',
                        fontSize: 16,
                        color:'#FFF'
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                        color: '#57617B'
                        }
                    },
                    axisLabel: {
                        margin: 10,
                        textStyle: {
                        fontSize: 12
                        },
                        formatter:function(params)
                        { 
                        return params+'%';
                        },
                    },
                    splitLine: {
                        lineStyle: {
                        color: '#57617B'
                        }
                    }
                    }],
                    series: []
                    }

                    const dataList = this.dataList;
                    for (const key in dataList) {
                    if (Object.hasOwnProperty.call(dataList, key)) {
                        optionObj.series.push({
                        name: dataList[key].name,
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 1,
                        showSymbol: false,
                        lineStyle: {
                        normal: {
                            width: 1
                        }
                        },
                        areaStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: `rgba(${this.corlorList[key]}, 0.3)`
                                }, {
                                offset: 0.8,
                                color: `rgba(${this.corlorList[key]}, 0)`
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 10
                            }
                        },
                        itemStyle: {
                        normal: {
                            color: `rgba(${this.corlorList[key]})`,
                            borderColor: `rgba(${this.corlorList[key]}, 0.2)`,
                            borderWidth: 12
                        }
                        },
                        data: dataList[key].data
                    })
                    }
                    }
                    //需要返回一个对象
                    return optionObj;
                })());
                
            })
        },
    }
}
</script>
<style scoped> 
#line{
  width: 100%;
  height: calc(100vh - 84px);
  margin: 0 auto;
}
</style>
